{% extends "base.html" %}
{% load treemenu_tags %}
{% load staticfiles %}
{% load report_tags %}

{% block page_specific_media %}
    <link rel="stylesheet" href="{% static "css/bootstrap-multiselect.css" %}" />
    <link rel="stylesheet" href="{% static "css/datatables/scroller.dataTables.min.css" %}" />
    <link rel="stylesheet" href="{% static "css/datatables/jquery.dataTables.min.css" %}" />
    <script src="{% static "js/datatables/jquery.dataTables.min.js" %}"></script>
    <script src="{% static "js/datatables/dataTables.bootstrap.min.js" %}"></script>
    <script src="{% static "js/datatables/dataTables.scroller.min.js" %}"></script>
    <script src="{% static "js/echarts/echarts.min.js" %}"></script>
    <script src="{% static "js/echarts/macarons.js" %}"></script>
    <script src="{% static "js/bootstrap-multiselect.js" %}"></script>
    <script src="{% static "js/jquery.formset.js" %}"></script>
    <script src="{% static "js/jquery.ba-bbq.js" %}"></script>
    <script src="{% static "js/Sortable.min.js" %}"></script>
    <script src="{% static "js/custom/chart.js" %}"></script>
    <style>
        input[type=checkbox] {
            height: 16px;
        }
        .drilldown-formset {
            display: flex;
            padding-bottom: 2px;
        }
        .cut-formset {
            padding-bottom: 2px;
        }
        .aggregate-formset {
            padding-bottom: 2px;
        }
        .orderby-formset {
            display: flex;
            padding-bottom: 2px;
        }

        .add-icon {
            padding: 10px 0 0 2px;
        }
        .formset-icon {
            padding-top: 10px;
            padding-left: 5px;
        }
        .formset-icon-list {
            display: flex;
            float: right;
        }

        #cubeship-config-form {
            margin-top: 10px;
        }
        .no-skin .sidebar {
            width:360px;
            height:1024px;
            overflow-x:hidden;
            overflow-y:scroll;
            background-color:#ffffff;
        }
        .form-control {
            margin-left: 2px;
        }
        .slide-toggle {
            display: none;
        }
        #preview_datatables {
            width: 100%;
        }
        .dataTables_wrapper .row:first-child {
            padding: 0;
            background-color: transparent;
            border-bottom: none;
        }
        .dataTables_wrapper .row:last-child {
            padding: 0;
            background-color: transparent;
            border-bottom: none;
        }
        .dataTables_wrapper.no-footer .dataTables_scrollBody {
            border: 1px solid #BCBCBC;
        }
        .dataTables_scrollHeadInner {
            border: 1px solid #BCBCBC;
        }
    </style>
{% endblock %}

{% block page_inline_scripts %}
    <script type="text/javascript">
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        var csrftoken = getCookie('csrftoken');

        function csrfSafeMethod(method) {
            // these HTTP methods do not require CSRF protection
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }

        jQuery.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                };
            }
        });
    </script>
{% endblock %}

{% block topbar %}
    {% show_top_menu 1 %}
{% endblock %}

{% block sidebar %}
    <div class="sidebar">
        <form method="POST" id="cubeship-config-form">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <button class="btn btn-white btn-success btn-block" type="button" onclick="preview()">
                        <i class="fa fa-rotate-right bigger-120"></i>
                        预览
                    </button>
                </div>
                <div class="col-sm-6">
                    <button class="btn btn-white btn-warning btn-block">
                        <i class="fa fa-save bigger-120"></i>
                        保存
                    </button>
                </div>
            </div>
            {% csrf_token %}
            <div class="col-sm-12">
                <div class="space-4"></div>
            </div>
            <div class="col-sm-12">
                <div class="widget-box transparent">
                    <div class="widget-header widget-header-small">
                        <h5 class="widget-title smaller">基础设置</h5>
                    </div>
                    <div class="widget-body">
                        <div class="widget-main">
                            {% for field in cubeship_form %}
                                <div>
                                    {{ field.label_tag }}
                                    {{ field }}
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="widget-box transparent">
                    <div class="widget-header widget-header-small">
                        <h5 class="widget-title smaller">分组</h5>
                    </div>
                    <div class="widget-body">
                        <div class="widget-main">
                            {% if drilldown_formset.total_error_count %} 
                                <div class="alert alert-danger ">
                                    {{ drilldown_formset.non_form_errors }}
                                </div>
                            {% endif %}
                            {{ drilldown_formset.management_form }}
                            <div id="drilldown-formsets">
                                {% for form in drilldown_formset %}
                                    <div class="drilldown-formset">
                                        {{ form }}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="widget-box transparent">
                    <div class="widget-header widget-header-small">
                        <h5 class="widget-title smaller">筛选</h5>
                    </div>
                    <div class="widget-body">
                        <div class="widget-main">
                            {% if cut_formset.total_error_count %} 
                                <div class="alert alert-danger ">
                                    {{ cut_formset.non_form_errors }}
                                </div>
                            {% endif %}
                            {{ cut_formset.management_form }}
                            <div id="cut-formsets">
                                {% for form in cut_formset %}
                                    <div class="cut-formset">
                                        {{ form }}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="widget-box transparent">
                    <div class="widget-header widget-header-small">
                        <h5 class="widget-title smaller">指标</h5>
                    </div>
                    <div class="widget-body">
                        <div class="widget-main">
                            {{ aggregate_formset.management_form }}
                            <div id="aggregate-formsets">
                                {% for form in aggregate_formset %}
                                    <div class="aggregate-formset">
                                        {{ form }}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="widget-box transparent">
                    <div class="widget-header widget-header-small">
                        <h5 class="widget-title smaller">排序</h5>
                    </div>
                    <div class="widget-body">
                        <div class="widget-main">
                            {% if orderby_formset.total_error_count %} 
                                <div class="alert alert-danger ">
                                    {{ orderby_formset.non_form_errors }}
                                </div>
                            {% endif %}
                            {{ orderby_formset.management_form }}
                            <div id="orderby-formsets">
                                {% for form in orderby_formset %}
                                    <div class="orderby-formset">
                                        {{ form }}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="widget-box transparent">
                    <div class="widget-header widget-header-small">
                        <h5 class="widget-title smaller">可视化设置</h5>
                    </div>
                    <div class="widget-body">
                        <div id="chart-options" class="widget-main">
                            {{ chartconfig_form }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <script type="text/javascript">
        function drilldown_formset_initial() {
            $('.drilldown-formset').formset({
                prefix: 'drilldown',
                showMove: true,
                addText: '<span class="fa fa-plus-circle add-icon bigger-130"></span>',
                moveText: '<span class="fa fa-arrows formset-icon bigger-130" style="color:#9585bf"></span>',
                deleteText: '<span class="fa fa-trash red formset-icon bigger-130"></span>',
                formCssClass: 'drilldown-formset',
            });
        }
        function cut_formset_initial() {
            $('.cut-formset').formset({
                prefix: 'cut',
                showMove: true,
                addText: '<span class="fa fa-plus-circle add-icon bigger-130"></span>',
                moveText: '<span class="fa fa-arrows formset-icon bigger-130" style="color:#9585bf"></span>',
                deleteText: '<span class="fa fa-trash red formset-icon bigger-130"></span>',
                formCssClass: 'cut-formset',
            });
        }
        function aggregate_formset_initial() {
            $('.aggregate-formset').formset({
                prefix: 'aggregate',
                showMove: true,
                showMore: true,
                addText: '<span class="fa fa-plus-circle add-icon bigger-130"></span>',
                deleteText: '<span class="fa fa-trash red formset-icon bigger-130"></span>',
                moreText: '<span class="fa fa-ellipsis-h green formset-icon bigger-130"></span>',
                moveText: '<span class="fa fa-arrows formset-icon bigger-130" style="color:#9585bf"></span>',
                formCssClass: 'aggregate-formset',
            });
        }

        function orderby_formset_initial() {
            $('.orderby-formset').formset({
                prefix: 'orderby',
                showMove: true,
                addText: '<span class="fa fa-plus-circle add-icon bigger-130"></span>',
                moveText: '<span class="fa fa-arrows formset-icon bigger-130" style="color:#9585bf"></span>',
                deleteText: '<span class="fa fa-trash red formset-icon bigger-130"></span>',
                formCssClass: 'orderby-formset',
            });
        }
        drilldown_formset_initial();
        aggregate_formset_initial();
        cut_formset_initial();
        orderby_formset_initial();

        var drilldown_formsets = document.getElementById('drilldown-formsets');
        var cut_formsets = document.getElementById('cut-formsets');
        var aggregate_formsets = document.getElementById('aggregate-formsets');
        var orderby_formsets = document.getElementById('orderby-formsets');

        Sortable.create(drilldown_formsets, {
            onSort: function(evt) {
                var parent = evt.item.parentElement;
                rerank(parent);
            }
        });
        Sortable.create(cut_formsets, {
            onSort: function(evt) {
                var parent = evt.item.parentElement;
                rerank(parent);
            }
        });

        Sortable.create(aggregate_formsets, {
            onSort: function(evt) {
                var parent = evt.item.parentElement;
                rerank(parent);
            }
        });

        Sortable.create(orderby_formsets, {
            onSort: function(evt) {
                var parent = evt.item.parentElement;
                rerank(parent);
            }
        });

        function rerank(parent){
            var ranks = parent.getElementsByClassName('rank');
            for (var i=0; i<ranks.length; i++) {
                ranks[i].value = i+1;
            }
        }

        function drilldownchange(node) {
            $.ajax({
                url: "/report/cubeship/orderby/formtemplate/",
                type: "POST",
                data: $('#cubeship-config-form').serialize(),
                success: function(data) {
                    orderby_formsets.innerHTML = data;
                    orderby_formset_initial();
                }
            })
        }

        function cutchange(node) {
            $.ajax({
                url: "/report/cubeship/cut/formtemplate/",
                type: "POST",
                data: $('#cubeship-config-form').serialize(),
                success: function(data) {
                    cut_formsets.innerHTML = data;
                    cut_formset_initial();
                }
            })
        }

        function cubechange(node) {
            $.ajax({
                url: "/report/cubeship/drilldown/formtemplate/",
                type: "GET",
                data: {'cube_id': node.value},
                async: false,
                success: function(data) {
                    drilldown_formsets.innerHTML = data;
                    drilldown_formset_initial();
                }
            })
            $.ajax({
                url: "/report/cubeship/cut/formtemplate/",
                type: "GET",
                data: {'cube_id': node.value},
                async: false,
                success: function(data) {
                    cut_formsets.innerHTML = data;
                    cut_formset_initial();
                }
            })
            $.ajax({
                url: "/report/cubeship/aggregate/formtemplate/",
                type: "GET",
                data: {'cube_id': node.value, 'chart_id': document.getElementById('id_chart').value},
                async: false,
                success: function(data) {
                    aggregate_formsets.innerHTML = data;
                    aggregate_formset_initial();
                }
            })
            $.ajax({
                url: "/report/cubeship/orderby/formtemplate/",
                type: "GET",
                data: {'cube_id': node.value},
                async: false,
                success: function(data) {
                    orderby_formsets.innerHTML = data;
                    orderby_formset_initial();
                }
            })

        }
        function chartchange(node) {
            $.ajax({
                url: "/report/cubeship/chart/formtemplate/",
                type: "GET",
                data: {"chart_id": node.value},
                success: function(data) {
                    document.getElementById("chart-options").innerHTML = data;
                }
            })
            $.ajax({
                url: "/report/cubeship/aggregate/formtemplate/",
                type: "POST",
                data: $('#cubeship-config-form').serialize(),
                async: false,
                success: function(data) {
                    aggregate_formsets.innerHTML = data;
                    aggregate_formset_initial();
                }
            })
        }

        function save_as() {
            rerank(document.getElementById("drilldown-formsets"));
            rerank(document.getElementById("cut-formsets"));
            rerank(document.getElementById("aggregate-formsets"));
            rerank(document.getElementById("orderby-formsets"));
            $.ajax({
                url: "",
                type: "POST",
                data: $('#cubeship-config-form').serialize(),
                dataType: "json",
                success: function(result) {
                }
            })
        }

        function preview() {
            rerank(document.getElementById("drilldown-formsets"));
            rerank(document.getElementById("cut-formsets"));
            rerank(document.getElementById("aggregate-formsets"));
            rerank(document.getElementById("orderby-formsets"));
            $.ajax({
                url: "/report/cubeship/getconfig/",
                type: "POST",
                data: $('#cubeship-config-form').serialize(),
                dataType: "json",
                success: function(result){
                    var chart = document.getElementById("chart");
                    while (chart.firstChild) {
                        chart.removeChild(chart.firstChild);
                    }
                    $('#chart').load_chart(
                        $("#id_chart").val(), 
                        result, 
                        $('#cubeship-config-form').serialize()
                    );
                }
            });
        }
    </script>
{% endblock %}

{% block content %}
<div class="main-content" style="margin-left:360px">
    <div class="page-content">
        <div class="row">
            <div class="col-sm-12 widget-container-col">
                <!-- #section:custom/widget-box -->
                <div class="widget-box transparent">
                    <div class="widget-header">
                        <h5 class="widget-title">预览</h5>
                        <!-- #section:custom/widget-box.toolbar -->
                        <div class="widget-toolbar no-border">
                            <a href="#" data-action="fullscreen">
                                <i class="ace-icon fa fa-arrow-down"></i>
                            </a>
                            <a href="#" data-action="collapse">
                                <i class="ace-icon fa fa-chevron-up"></i>
                            </a>
                            <a href="#" data-action="fullscreen" class="orange2">
                                <i class="ace-icon fa fa-expand"></i>
                            </a>
                            <a href="#" data-action="close">
                                <i class="ace-icon fa fa-times"></i>
                            </a>
                        </div>
                        <!-- /section:custom/widget-box.toolbar -->
                    </div>
                    <div class="widget-body">
                        <div class="widget-main">
                            <div id="chart" style="height:600px">
                            <script type="text/javascript">
                                preview();    
                            </script>
                        </div>
                    </div>
                </div>
                <!-- /section:custom/widget-box -->
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block footer %}
{% endblock %}
